import React, { useState } from 'react'
import { Search } from 'lucide-react'

interface SearchBarProps {
  searchEngine: string
}

const SearchBar: React.FC<SearchBarProps> = ({ searchEngine }) => {
  const [query, setQuery] = useState('')

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    if (query.trim()) {
      let searchUrl = ''
      switch (searchEngine) {
        case 'google':
          searchUrl = `https://www.google.com/search?q=${encodeURIComponent(query)}`
          break
        case 'bing':
          searchUrl = `https://www.bing.com/search?q=${encodeURIComponent(query)}`
          break
        case 'duckduckgo':
          searchUrl = `https://duckduckgo.com/?q=${encodeURIComponent(query)}`
          break
        default:
          searchUrl = `https://www.google.com/search?q=${encodeURIComponent(query)}`
      }
      window.location.href = searchUrl
    }
  }

  return (
    <form onSubmit={handleSearch} className="mb-8">
      <div className="relative">
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder={`Search with ${searchEngine.charAt(0).toUpperCase() + searchEngine.slice(1)}`}
          className="w-full py-2 px-4 pr-10 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button
          type="submit"
          className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
        >
          <Search size={20} />
        </button>
      </div>
    </form>
  )
}

export default SearchBar